<template>
  <div class="new-tab-page large parkinglot-wrapper">
    <div class="page-main-title">
      车场配置-区域配置<i class="return-icon" @click="back"></i>
      <div class="actions">
        <a href="javascript:;" class="add-icon" @click="addNewArea">
          <i class="el-icon-circle-plus"></i>
          新增区域
        </a>
        <a href="javascript:;" @click="linkToTips">配置说明</a>
      </div>
    </div>
    <div class="main-content">
      <div class="page-tips">
        操作步骤：新增区域 / 选择上级区域后输入内场区域名称/勾选通道
      </div>
      <el-form label-width="0px" :model="areaData" ref="areaData" class="area-Form" size="mini" status-icon>
        <div class="area-box">
          <div class="area-item" v-for="(item, index) in areaData.areaList" :key="index">
            <div class="title" v-if="item.parkArea">
              {{ item.areaName }}
            </div>

            <div class="title" v-if="!item.parkArea">
              <a href="javascript:;" class="del-icon" @click="delAreaItem(item, index)">
                <img src="../../../../assets/img/ic_subscribe_delete@2x.svg" alt="" />
              </a>
              <el-form-item
                label=""
                :prop="'areaList.' + index + '.fakeParentAreaId'"
                :rules="[{ required: true, message: '请选择上级区域', trigger: 'change' }]"
                style="margin-right: 15px"
              >
                <el-select placeholder="请选择上级区域" v-model="item.fakeParentAreaId" @focus="cumputeUpperList(item)">
                  <el-option
                    v-for="item in item.upperAreaList"
                    :key="item.fakeAreaId"
                    :label="item.areaName"
                    :value="item.fakeAreaId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label=""
                :prop="'areaList.' + index + '.areaName'"
                :rules="[
                  {
                    required: true,
                    validator: checkName,
                    trigger: 'blur'
                  }
                ]"
              >
                <el-input
                  v-model.trim="item.areaName"
                  placeholder="请输入区域名称"
                  @blur="updateUpperList(item)"
                ></el-input>
              </el-form-item>
            </div>

            <div class="channel-list">
              <el-form-item
                label=""
                :prop="'areaList.' + index + '.checkedIds'"
                :rules="[{ type: 'array', required: true, message: '请至少选择一个通道', trigger: 'change' }]"
              >
                <el-checkbox-group v-model="item.checkedIds" :disabled="areaData.areaList.length === 1">
                  <el-checkbox
                    v-for="channel in item.channelList"
                    :label="channel.channelId"
                    :key="channel.channelId"
                    @change="handleCheckItemChange($event, channel.channelId, item, channel)"
                    >{{ channel.entranceName }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <el-form-item size="medium" class="action-box" label-width="0px">
          <el-button plain type="primary" @click="back">取消</el-button>
          <el-button type="primary" @click="submiteForm">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import pageScript from './area_edit.js';
export default pageScript;
</script>

<style lang="less" scoped>
@import './area_edit.less';
</style>
